<template>
  <div v-if="datas.length" class="home-designer">
    <home-title title="明星设计师" show-more @jumpMore="jumpMore" />
    <div class="content">
      <uni-row>
        <uni-col
          v-for="(item,index) in datas"
          :key="index"
          :span="4"
        >
          <div class="item" @click="designInfo(item.id)">
            <div class="avatar">
              <image class="img" mode="aspectFill" :src="item.headUrl" alt="" />
            </div>
            <div class="name">{{ item.stylistName }}</div>
            <div class="title">{{ item.grade }}</div>
          </div>
        </uni-col>
      </uni-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, toRaw } from 'vue';
import HomeTitle from './HomeTitle.vue';

defineProps({
  datas: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const emit = defineEmits(['jumpMore'])

const designInfo = (id:string) => {

}

const jumpMore = () => {
  emit('jumpMore',{ path: '/pagesSub/designerList/index' })
}
</script>

<style lang="scss">
.home-designer {
  padding: 10px 0;
  .content {
    padding: 8px;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 4px;
      height: 170px;
      width: 113px;
      border: 1px solid #EEEEEE;
      overflow: hidden;
      .avatar {
        width: 111px;
        height: 111px;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        font-weight: bold;
        color: #111;
        font-size: 14px;
        margin-top: 6px;
      }
      .title {
        font-size: 12px;
        color: #999;
        margin-top: 4px;
      }
    }
  }
}
</style>
